<template>
  <div class="announcement-management views-container">
    <div class="wlm-table">
      <div class="wlm-table-header">
        <!-- :model="tableFormatData.systemlog.files" -->
        <el-form
          :model="formData"
          size="small"
          label-width="85px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item
            label=""
            class="filter"
          >
            <el-form-item label="用户模块：">
              <!-- <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.systemlog.files.log_content" placeholder="请输入日志内容" style="width:160px;"></el-input> -->
              <el-select ref="select" placeholder="请选择" v-model="formData.model">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="用户模块" value="user"></el-option>
                  <el-option label="商品模块" value="goods"></el-option>
                  <el-option label="订单模块" value="order"></el-option>
                  <el-option label="页面模块" value="diy"></el-option>
                  <el-option label="设置模块" value="setting"></el-option>
                  <el-option label="任务模块" value="asy"></el-option>
                  <el-option label="消息模块" value="message"></el-option>
                  <el-option label="地址模块" value="address"></el-option>
                  <el-option label="抽奖模块" value="luck"></el-option>

                  <!-- 'user'      => '用户模块',
        'goods'     => '商品模块',
        'order'     => '订单模块',
        'diy'       => '页面模块',
        'setting'   => '设置模块',
        'asy'       => '任务模块',
        'luck'      => '抽奖模块',
        'message'   => '消息模块',
        'address'   => '地址模块', -->
                    </el-select>
            </el-form-item>
            <el-form-item label="键名：">
              <el-input placeholder="请输入内容" v-model="formData.key"></el-input>
            </el-form-item>
            <!-- <el-form-item label="日志时间：">
                        <el-date-picker style="width:360px;margin-right:0;" v-model="tableFormatData.systemlog.files.time" :picker-options="pickerOptions" value-format="timestamp" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item> -->

          </el-form-item>
          <el-form-item
            label=""
            class="filter-btns"
          >
            <el-button
              type="primary"
              @click="search"
            >筛选</el-button>
            <el-button
              type="text"
              @click="resetSearch"
            >清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="wlm-table-content">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            label="缓存模块"
            prop="model_text"
          ></el-table-column>
          <el-table-column
            label="键名"
            prop="key"
          ></el-table-column>
          <el-table-column
            label="键值"
            prop="value"
          >
            <template slot-scope="scope">
                <el-popover
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  :content="scope.row.value | filterValue">
                  <!-- <el-button >hover 激活</el-button> -->
                  <div slot="reference">{{scope.row.value&&(scope.row.value+'').length>40?(scope.row.value+'').substring(0,40)+'...' :scope.row.value}} </div>
                </el-popover>

            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <!-- 1:字符串
                                * 2:集合
                                * 3:链表
                                * 4:有序集合
                                * 5:HASH
                                * 6:数组 -->
              <span v-if="scope.row.type==1">字符串</span>
              <span v-if="scope.row.type==2">集合</span>
              <span v-if="scope.row.type==3">链表</span>
              <span v-if="scope.row.type==4">有序集合</span>
              <span v-if="scope.row.type==5">HASH</span>
              <span v-if="scope.row.type==6">数组</span>
            </template>
          </el-table-column>
          <el-table-column
            label="剩余生存时间"
            prop="ttl"
          ></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>-</div>
            </template>
          </el-table-column>

        </el-table>
      </div>

    </div>

  </div>

</template>

<script>
import {
  cacheLists
} from '@/api/setting'
export default {
  data() {
    return {
      tableData: [],
      formData: {
        model: '',
        key: ''
      }
    }
  },
  created() {
    this.getData()
  },
  filters: {
    filterValue(value) {
      let result = ''
      if (Array.isArray(value) || (typeof value == 'object')) {
        result = JSON.stringify(value)
      } else {
        result = value + ''
      }
      return result
    }
  },
  methods: {
    getData() {
      cacheLists(this.formData).then(res => {
        this.tableData = res.data.data
        console.log(this.tableData)
      })
    },
    search() {
      this.getData()
    },
    resetSearch() {
      this.formData.model = ''
      this.formData.key = ''
      this.getData()
    }
  }

}
</script>

<style>
</style>
